<template>
  <page-frame :showPageRefresh="showPageRefresh" v-model:refresh-loading="pageRefreshLoading" @onRefresh="getTaskData"
    :showNavBar="false">
    <div class="w h task-page" style="overflow-y:auto">
      <header class="page-header">
        <page-search>
          <template #search-right>
            <span></span>
          </template>
        </page-search>
      </header>
      <main class="page-main">
        <div class="title-category">
          <div class="category-title"> 任务 </div>
          <div class="category-title-btn category-title-btn-time">{{ dateList[active].date || shiftInfo.date }}</div>
        </div>
        <div class="main-date-tab">
          <van-tabs v-model:active="active" color="transparent">
            <van-tab v-for="(tabs, index) in dateList" :key="index">
              <template #title>
                <div class="task-tab-item" :class="{ 'task-tab-item-selected': active == index }">
                  <div class="t-c">{{ tabs.week }}</div>
                  <div class="t-c">{{ tabs.dm }}</div>
                </div>
              </template>
            </van-tab>
          </van-tabs>
        </div>
        <div class="title-category">
          <div class="category-title2"> {{ shiftInfo.date == dateList[active].date ? '今天' : dateList[active].date }}
          </div>
          <div class="category-title-btn category-title-btn-time">{{ currentDate.substring(5, 16) }}</div>
        </div>
        <div class="task-list">

          <div v-if="listData.length <= 0">
            <!-- 通用错误 -->
            <van-empty description="没有相关信息" />
          </div>

          <div class="task-line" v-for="(li, i) in listData">
            <div class="task-time-item">
              <div class="item-time">{{ li.hour }}</div>
              <div class="task-item-box">
                <div v-if="!li.lists || li.lists.length <= 0">
                  <!-- 通用错误 -->
                  <van-empty description="没有相关信息" />
                </div>
                <!-- system_state : 1 正常 ,反之超時 -->
                <div v-for="(task, t) in li.lists" :key="t" class="task-info" :state="task.state"
                  :class="[{ 'info-timeout': task.system_state != 1 }, getTaskCodeByState(task.state, task.cancel_state).classCode]"
                  @click="goDetailInfo(task)">
                  <div class="task-name">JAM-{{ task.id }}维修</div>
                  <div class="task-time">{{ task.start }} - {{ task.end }}</div>
                  <div class="task-tag">
                    <div v-if="['5', '6'].includes(task.cancel_state + '')" class="tag-item tag-urgent-3"
                      @click.stop="showNotify(task.reject_reason)">
                      reject
                    </div>
                    <div class="tag-item" :class="[`tag-urgent-${task.urgent || '1'}`]">
                      {{ getUrgentValue(task.urgent) }}
                    </div>
                    <div class="tag-item tag-machine">{{ task.short }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="task-line" v-for="i in 2">
            <div class="task-time-item">
              <div class="item-time item-time-no-task">{{ i + 14 }}:00</div>
              <div class="task-item-box">
                <span class="task-no-label">你没有任何任务安排</span>
                <span class="task-no-btn">+ &nbsp;添加</span>
              </div>
            </div>
          </div> -->
          <!-- <div class="task-line"></div> -->
        </div>
        <page-footer isMainPage> 已经到达底部了 </page-footer>
      </main>
    </div>
  </page-frame>
</template>

<script lang="ts">

import pageBase from '@/views/mixins/page-base';
import pageRefresh from '@/views/mixins/page-refresh';
import { PageFrame, PageSearch, PageFooter } from '@/importComponents';
import { getNowDate, getWeek } from '@/utils';
import { getTaskDataList } from "@/apis/index";
import { RequestCode } from '@/server/base';



export default {
  mixins: [pageBase, pageRefresh],
  components: { PageFrame, PageSearch, PageFooter },
  data() {
    return {
      active: 0,
      dateList: [] as { date: string, week: string, dm: string }[],
      //最大可查看7天内内容
      MAX_DATE_LEN: 7,


      list: [] as InfoObject[],
    }
  },
  computed: {
    taskCount(): number {
      if (!this.info || this.list.length <= 0) {
        return 0;
      }
      return this.list.reduce((previousValue: number, currentValue: InfoObject) => {
        return previousValue + currentValue.lists.length;
      }, 0)
    },
    listData() {
      return this.list.filter(item => item.lists.length > 0);
    },
  },
  watch: {
    active(news: number) {
      this.getTaskData();
    }
  },
  methods: {
    getDateListTabs() {
      const currentDate = getNowDate(0, this.shiftInfo.date || null);
      for (let i = 0; i < this.MAX_DATE_LEN; i++) {
        const date = getNowDate(-i, currentDate);
        const week = getWeek(date, 'en_simple');
        this.dateList.unshift({ week, date, dm: date.substring(5) });
      }
      this.active = this.dateList.length - 1;
    },
    getTaskData() {
      this.pageRefreshLoading = true;
      const date = this.dateList[this.active].date;
      getTaskDataList(date).then((res: RequestCode) => {
        this.pageRefreshLoading = false;
        this.list = res.data;
      }).catch(error => {

      })
    },
    /**
    * 去详情页面
    */
    goDetailInfo(item: any) {
      let code = this.getTaskCodeByState(item.state, item.cancel_state).code;
      code = code == 'canceled' ? 'cancel' : code;
      const name = `${code}-detail`;
      if (!name) {
        return;
      }
      this.$router.push({
        name, params: {
          value: this.getParamsString(item)
        }
      })
    }
  },
  created() {
    this.getDateListTabs();
    this.getTaskData();
  }
}
export type InfoObject = { hour: string, lists: any[] };
</script>

<style lang="scss" scoped>
.page-header {
  padding: 46px 24px 0px 24px;
  @extend .box-b, .w;
}

.page-main {
  padding: 0 24px;
  @include title-category(38px);

  .main-date-tab {
    margin-top: 8px;

    .task-tab-item {
      &>div:nth-child(1) {
        font-size: 16px;
        font-weight: 600;
        color: #10275a;
        padding-top: 10px;
      }

      &>div:nth-child(2) {
        font-size: 14px;
        font-weight: 400;
        color: #10275a;
        text-align: left;
        vertical-align: top;
        padding-top: 10px;
        padding-bottom: 15px;
      }
    }
  }

  .task-list {
    margin-top: 24px;

    .task-line {
      border-top: 1px solid #e3e8f1ff;
      // height: 146px;
      padding: 16px;
      padding-right: 0px;
      box-sizing: border-box;

      .task-time-item {
        height: 100%;
        @extend .w, .f-b;

        .item-time {
          margin-top: 10px;
          margin-right: 18px;
          width: 36px;
          text-align: right;
          flex-shrink: 0;
        }

        .task-item-box {
          @extend .f-s, .f-g1;
          overflow-y: hidden;
          overflow-x: auto;
          align-items: center;

          .task-info {
            padding: 16px;
            flex-shrink: 0;
            width: 190px;
            height: 114px;
            opacity: 1;
            border-radius: 15px;
            background: #f9fafdff;
            margin-right: 10px;
            box-sizing: border-box;

            .tag-item {
              margin: 3px 4px !important;
            }

            &::before {
              @include task-tip-border(36px, 20px, 14px);
            }

            &::after {
              @include task-tip-right-btn(20px, 14px);
            }
          }

          /**沒有任務*/
          .task-no-label {
            font-size: 12px;
            font-weight: 400;
            color: rgba(154, 168, 199, 1);
            position: relative;

            &::after {
              content: 'or';
              right: -22px;
              top: 2px;
              position: absolute;
              color: #9aa8c7;
              font-size: 12px;
            }
          }

          .task-no-btn {
            margin-left: 40px;
            font-size: 12px;
            font-weight: 500;
            color: rgba(44, 64, 110, 1);
          }
        }

        .item-time-no-task {
          margin-top: 0px;
        }
      }
    }
  }
}
</style>

<style lang="scss">
.task-page {

  .van-tabs,
  .van-tabs--line,
  .van-tabs__wrap {
    height: 72px !important;
  }

  .van-tab__text--ellipsis {
    display: block !important;
  }

  .van-tab--active {
    border-radius: 12px !important;
    background: #5b67caff !important;
    color: #fff;

    .task-tab-item>div {
      color: #fff !important;
    }
  }

  // .van-tabs__nav--line.van-tabs__nav--shrink,
  // .van-tabs__nav--line.van-tabs__nav--complete {
  //   padding-left: 0px !important;
  //   padding-right: 0px !important;
  // }
  // .van-tab--grow {
  //   &:first-child {
  //     padding-left: 0px !important;
  //   }
  //   &:last-child {
  //     padding-right: 0px !important;
  //   }
  // }
}
</style>
